<template>
  <van-pull-refresh v-model="pullRefreshing" @refresh="onPullRefresh">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-row v-for="(item, index) in movieList" :key="index" type="flex" justify="space-between">
        <van-col span="8">
          <a @click="jumpToDetail(item.id)">
            <img :src="item.cover" alt="cover" class="card-img" style="width: 100%">
          </a>
        </van-col>
        <van-col span="15">
          <a @click="jumpToDetail(item.id)">
            <h1 class="van-multi-ellipsis--l2">
              <span>
                <span>{{ item.name.split(" ")[0] }}</span>
                <span v-html="'&nbsp;&nbsp;'"></span>
                <span class="information">{{ item.name.split(" ")[1] }}</span>              
              </span>
            </h1>
          </a>
          <p class="information score">
            <span><van-icon name="edit" color="#8a8a8a" /> {{ item.tuiScore }} </span>
            <span><van-icon name="good-job-o" color="#8a8a8a"/> {{ item.desc }}</span>
          </p>
          <p class="information van-ellipsis">
            <span>导演：</span>
            <span>{{ item.directorName }}</span>
          </p>
          <p class="information van-ellipsis">
            <span>主演：</span>
            <span>{{ item.actorNames }}</span>
          </p>
          <p class="information van-ellipsis">
            <span>类型：</span>
            <!-- <span>{{ item. }}</span> -->
            <span>{{ item.regions }}</span>
          </p>
        </van-col>
      </van-row>
    </van-list>
  </van-pull-refresh>
</template>

<script>
import { EventBus } from '../../../../event-bus'

export default {
  data() {
    return {
      // vant-list 参数
      movieList: [],
      loading: false,
      finished: false, 
      pullRefreshing: false, 
      
      // 参数：获取电影
      queryInfo: {
        sortType: 1,
        regionId: 1,
        type: 0,
        movieDate: 1,
        page: 1,
        watchType: 1
      },

      type: {
        11: '喜剧',
        21: '爱情',
        31: '动作',
        41: '恐怖',
        51: '动画',
        6:  '其它',
        0:  '全部'
      }
    };
  },

  computed: {
    url() {
      return this.baseUrl 
    }
  },

  created() {
    // 和分类导航进行通信
    EventBus.$on("getMovie", (sortTypeName, regionName, typeName, movieDateName, watchTypeName) => {
      this.queryInfo.sortType = sortTypeName;
      this.queryInfo.regionId = regionName;
      this.queryInfo.type = typeName;
      this.queryInfo.movieDate = movieDateName;
      this.queryInfo.watchType = watchTypeName;
      console.log(this.queryInfo);
      this.getMovieList();
    })
  },

  methods: {
    onLoad() {
      this.getMovieList()
    },

    onPullRefresh() {
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },

    getMovieList() {
      this.$axios.get("/api/movie/list/ajax/load", { params: this.queryInfo })
      .then(res => {
        this.movieList = res.data.data
        console.log(this.movieList);
        if (res.status === 200) {
          // 请求成功，loading为false
          this.loading = false;
          if (this.movieList.length > 8) {
            this.movieList = this.movieList.concat(res.data) 
            this.finished = false
          }
          // 如果返回的数据长度等于0，则显示没有更多了。。
          if (res.data.length === 8 ) {
            this.finished = true
          }
        } 
      })
      .catch((err) => {
        console.log(err);
      })
    },
    
    jumpToDetail(Id) {
      this.$router.push({
        path: "/detail",
        query: { movieId: Id }
      })
    }
  },
};
</script>

<style scoped>
.card {
  display: flex;
}

a {
  color: #000000;
}
</style>